<template>
    <div id="ActivityInfo">
        <van-image fit="cover" @click="$pushRoute('/policy')" class="a-banner" :src="formData.actbill"/>
        <h3 class="l-header">{{ formData.title }}</h3>
        <van-cell-group>
            <van-cell :title="formData.actstarttime" icon="todo-list-o"/>
            <van-cell :title="formData.actaddress" @click="gotoMap(formData.actaddress)" icon="location-o" is-link/>
            <van-cell icon="hotel-o">
                <span slot="title">主办方：<strong class="l-strong">{{ formData.sponsor }}</strong></span>
            </van-cell>
        </van-cell-group>
        <div class="rich-text" v-html="formData.actdetails"/>
        <footer class="l-footer">
            <van-button class="l-footer__btn" @click="$pushRoute('/index')">首页</van-button>
            <van-button class="l-footer__btn" @click="passed||onSubmit()" :class="{passed:isPassed}">{{isPassed?'已过报名时间':'立即报名'}}</van-button>
        </footer>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import {Prop} from "vue-property-decorator";
    import {requestByGet} from "@/utils/request";
    import dayjs from "dayjs";

    @Component
    export default class ActivityInfo extends Vue implements ComponentOptions<Vue> {
        name = "ActivityInfo";
        @Prop() customId!: string;
        formData: any = {}
        async created() {
            this.formData = await requestByGet(`/qqc/qqcExercise/queryById`, {id: this.customId})
        }
        get isPassed() {
            return dayjs(this.formData.actstarttime).isBefore(dayjs())
        }
        gotoMap(addr) {
            location.href = `https://map.baidu.com/mobile/webapp/search/search/qt=s&wd=${addr}&vt=map&traffic=on`
        }
        onSubmit(){

        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #ActivityInfo {
        /deep/ .van-cell__right-icon {
            margin-left: auto;
        }
        .l-header {
            padding: 12px 16px;
            color: $strong-clr;
            line-height: 1.3;
            background: white;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .a-banner {
            min-width: 100%;
            min-height: 100px;
        }
        .rich-text {
            margin-top: 10px;
            min-height: 300px;
            background: white;
            padding: 16px;
            line-height: 1.8;
        }
        .l-strong {
            color: #0cf;
        }
        /deep/ .van-cell__title {
            font-size: 12px;
            margin-left: 6px;
            color: $p-color;
        }
        .l-footer {
            @include absoluteFull(fixed);
            top: auto;
            display: flex;
            box-shadow: 0 -1px 2px #f4f4f4;
            &__btn {
                flex: 1;
                &:last-child {
                    color: white;
                    flex: 2;
                    background: #07c160;
                    border-color: #07c160;
                }
                &.passed {
                    border-color: transparent;
                    background: white;
                    color: $strong-clr;
                }
            }
        }
    }
</style>
